import React, {PureComponent} from 'react'
// 引入 ECharts 主模块
import echarts from 'echarts';
import {setTitle, scale, colors} from '../chart/util/common'
import baseChart from './base-chart'
class BaseLine extends PureComponent {
    constructor() {
        super()
    }

    renderData = (config) => {
        return {
            title: setTitle({text: config.title}),
            legend: {
                data: config.yAxisData.map(yAxis => yAxis.name).sort()
            },
            xAxis: {
                data: config.xAxisData
            },
            series: config.yAxisData.map(yAxis => {
                return {
                    smooth: true,
                    type: 'line',
                    symbolSize: 4 * scale,
                    symbol: 'emptyCircle',
                    lineStyle: {
                        normal: {
                            width: 1.5 * scale
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(0,0,0,.2)'
                            }, {
                                offset: 0.1,
                                color: 'rgba(0,0,0, .1)'
                            }, {
                                offset: 1,
                                color: 'rgba(0,0,0, 0)'
                            }], false),
                            shadowColor: 'rgba(0, 0, 0, 0.0)',
                            shadowBlur: 10
                        }
                    },
                    ...yAxis
                }
            }),
        }
    }

    componentWillReceiveProps(nextProps) {
        const {config, setChartInstance} = nextProps
        this.myChart.setOption(this.renderData(config));
        config.option && this.myChart.setOption(config.option);

    }

    componentDidMount() {
        console.log( [1, 2, 3, 4, 5, 6, 7,8,9,10].map(index => {
            return echarts.color.modifyHSL('#5A94DF', Math.round(30 * index))
        }))
        const {config, setChartInstance} = this.props
        this.myChart = setChartInstance(echarts.init(this.refs.chart));
        const option = {
            title: setTitle({text: 'line'}),
            color: [1, 2, 3, 4, 5, 6, 7].map(index => {
                return echarts.color.modifyHSL('#5A94DF', Math.round(300 / 7 * index))
            }),
            tooltip: {
                trigger: 'axis',
                textStyle: {
                    fontSize: 14 * scale
                }
            },
            grid: {
                left: '5%',
                right: '5%',
                top: 38 * scale,
                bottom: 34 * scale,
                containLabel: true
            },
            xAxis: {
                type: 'category',
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#fff',
                        width: scale
                    }
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    textStyle: {
                        color: '#999',
                        fontSize: 12 * scale
                    }
                },
                boundaryGap: false,
                data: []
            },
            yAxis: {
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#fff',
                        width: scale
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(0,0,0,.2)',
                        width: scale
                    }
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    textStyle: {
                        color: '#999',
                        fontSize: 12 * scale
                    }
                },
                type: 'value'
            },
            legend: {
                data: [],
                bottom: 10 * scale,
                itemWidth: 25 * scale,
                itemHeight: 12 * scale,
                textStyle: {
                    color: '#fff',
                    fontSize: 12 * scale
                }

            },
            series: []
        }

        this.myChart.setOption(option);
        this.myChart.setOption(this.renderData(config));
        config.option && this.myChart.setOption(config.option);
    }

    render() {
        return (
            <div ref='chart' style={{height: '100%'}}/>
        )
    }

}

export default baseChart(BaseLine)